<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
    <meta name="author" content="order by dede58.com"/>
    <title>用户首页</title>
    <link rel="stylesheet" type="text/css" href="css/jiazaitoubu.css">
    <link rel="stylesheet" type="text/css" href="css/css.css">
    <link rel="stylesheet" type="text/css" href="css/center.css">
    <link rel="stylesheet" type="text/css" href="css/city.css">
    <script src="js/Popt.js"></script>
    <script src="js/cityJson.js"></script>
    <script src="js/citySet.js"></script>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/index2.js"></script>
    <script src="js/tiame.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

    <script src="js/common.js"></script>

</head>
<body>

<div id="app">
<!-------------------------------------top----------------------------------->
<top></top>
<!------------------------------------导航栏------------------------>
<bar></bar>


<div class="centers_m">
    <!----------------------------------------清除浮动---------------------------->
    <div class="clear_sm"></div>
    <!-------------------------------------left------------------------------------->
   <bars></bars>
    <!--right-->
    <div class="centers_mr">
        <h1 class="welcom_tm">欢迎您，超级会员 <font>{{userinfo.userName}}</font>！您上次登录时间为{{userinfo.loginTime | formatTime(userinfo.loginTime,'yyyy-MM-dd hh-mm-ss')}} </h1>
        <!--开始-->
        <div class="public_m1">
            <div class="public_m2">资料管理</div>
            <!--照片和内容-->
            <div class="zp_nrm">
                <!--left-->
                <div class="zp_nrm_l">
                    <img src="images/user.png"/>
                    <a href="#">更换头像</a>
                </div>
                <!--right-->
                <div class="zp_nrm_r">
                    <p><em>用户名：</em><i>{{userinfo.userName}}</i></p>
                    <p><em>姓名：</em><i>{{userinfo.name}}</i></p>
                    <p><em>身份证号：</em><i>{{idcard.householdIdcard}}</i><a href="safe_idcord.html">立即设置</a></p>
                    <p><em>常用地址：</em><i>{{idcard.address}}</i><a href="safe_address.html">立即设置</a></p>
                    <p><em>手机号：</em><i>{{userinfo.phone}}</i><a href="safe_phone.html">立即绑定</a></p>
                    <p><em>性别：</em><input type="radio" name="sex" class="sex_m">
                        <i>保密</i>
                        <input type="radio" name="sex" class="sex_m">
                        <i>男</i>
                        <input type="radio" name="sex" class="sex_m">
                        <i>女</i>
                    </p>
                    <span class="borth_m">
                    	<em>生日：</em>
                        <select style=" float:left; height:23px; border:1px solid #eaeaea; margin-top:13px; margin-right:3px">
                        	<option>-年-</option>
                            <option v-for="y in this.year">{{y}}年</option>
                        </select>
                        <select style=" float:left; border:1px solid #eaeaea; margin-top:13px; margin-right:3px">
                        	<option>-月-</option>
                            <option v-for="m in this.month">{{m}}月</option>
                        </select>
                        <select style=" float:left; border:1px solid #eaeaea; margin-top:13px; margin-right:3px">
                        	<option>-日-</option>
                            <option v-for="d in this.day">{{d}}日</option>
                        </select>

                    </span>

                    <a   class="public_m3" @click="update">保存修改</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!--页脚-->
<end></end>

</div>
</body>
</html>

<script>
var app = new Vue({
    el: "#app",
    data: {//存放数据
        userinfo: {
            id:1,
        },//存放后端的数据
        idcard:{
            id:3,
        },
        addFaultType: {id: 0},//存放新增加的数据
        sizes: [5, 10, 15, 20, 25, 30],
        year:[2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020,2021],
        month:[1,2,3,4,5,6,7,8,9,10,11,12],
        day:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],

    },
    created: function () {
        this.initData(1);//初始化方法
        this.showidcard();

    },

    methods: {
        //数据初始化
        initData: function (pageNum) {

            axios.post("http://localhost:8080/manage/showUserinfoType?id=1")
            //链接数据库
                .then(res => {
                    console.log(res.data.data);
                    this.userinfo=res.data.data;



                });
        },
        showidcard :function () {
        axios.post("http://localhost:8080/manage/showIDcard?id=3")
                .then(res=>{
                    console.log(res.data.data);
                    this.idcard=res.data.data;
                })

        },
        update:function () {
            alert("修改成功")

        }





    }

})
</script>


<script>
    //模拟下拉菜单的js*/
    $(".sjhcp_in span").on("mouseenter", function(e)
    {
        if($(".little_list").is(":hidden"))
        {
            $(".little_list").show();
        }
        else
        {
            $(".little_list").hide();
        }
        $(".little_list em").click(function()
        {
            var txt=$(this).text();
            $(".sjhcp_in span").text(txt);
            $(".little_list").hide();
        })
        $(document).one("click", function()
        {
            $(".little_list").hide();
        });
        e.stopPropagation();
    });
    $(".little_list").on("click", function(e)
    {
        e.stopPropagation();
    });

    window.onload=function()
    {
        $(".aside").css({display:"none"})
        $(".important").mouseenter(function(){
            $(".aside").css({display:"block"})
        }).mouseleave(function(){
            $(".aside").css({display:"none"})
        })
    }

</script>
<script type="text/javascript">
    $(function()
    {
        $(".centers_listm_one_in").click(function()
        {
            $(this).next(".gjszmdm").slideToggle().siblings("gjszmdm").slideUp()
        });
    })
</script>
